<template>
  <div>
    <a-modal v-model="visible" :title="modal_title" on-ok="handleOk">
      <template slot="footer">
        <a-button key="back" @click="handleCancel"> 返回 </a-button>
        <a-button
          key="submit"
          type="primary"
          :loading="loading"
          @click="handleOk"
        >
          提交
        </a-button>
      </template>
      <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
        <a-form-item label="班级信息">
          <a-cascader
            ref="cascader"
            size="large"
            :options="options"
            :load-data="loadData"
            placeholder="请选择对应的学校系部班级"
            change-on-select
            @change="onChange"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script>
export default {
  props: ["userid"],
  data() {
    return {
      formLayout: "horizontal",
      form: this.$form.createForm(this, { name: "coordinated" }),
      // 动态显示弹框标题
      modal_title: "",
      loading: false,
      visible: false,
      // 判断是否是新增
      state_update: false,
      // 点击的ID
      Id: 0,

      // 级联选择内容
      options: [
        {
          value: "zhejiang",
          label: "Zhejiang",
          isLeaf: false,
        },
        {
          value: "jiangsu",
          label: "Jiangsu",
          isLeaf: false,
        },
      ],
      class_id: "",
    };
  },
  created() {},

  methods: {
    // 在模态加载完成后 对select 进行选择上的填充
    init(state) {
      //如果是修改操作
      if (state) {
        this.$nextTick(async () => {
          this.modal_title = "更新";
          this.visible = true;
          // 设置更新标志 让确认时 发送不同的请求
          this.state_update = true;
          //async 返回一个promise 对象 用then 方法提取
        });
      } else {
        this.visible = true;
        this.modal_title = "新增";
        this.state_update = false;
        // 新增操作
        this.$nextTick(async () => {
          this.form.resetFields();
          this.$refs.cascader.sValue = [];
          this.getOptions().then((res) => {
            this.options = res;
          });
        });
      }
    },
    // 模态的确认按钮触发
    async handleOk(e) {
      e.preventDefault();
      this.form.validateFields(async (err, values) => {
        // 如果表单验证通过的话
        if (!err) {
          this.loading = true;
          if (this.state_update == false) {
            //新增操作
            // TODO:
            const { data: res } = await this.$http.post(
              "/admin/teacher/class",
              {
                userId: this.userid,
                classId: this.class_id,
              }
            );
            if (res.code == 200) {
              // this.$message.success("新增成功");
              this.common.notify("success", "新增成功");
              this.$emit("refreshDataList");
              setTimeout(() => {
                this.visible = false;
                this.loading = false;
              }, 1000);
            } else {
              // this.$message.warning("操作异常");
              this.common.notify("warning", "操作异常");
            }
          }
        }
      });
    },
    handleCancel(e) {
      this.visible = false;
      this.$emit("refreshDataList");
    },
    update(record) {
      this.$nextTick(async () => {
        // 将ID放置全局 让其他人访问。
        // 将状态放置全局, 作用是 动态的显示与隐藏 图片上传Or 图片查看
        this.state_update = true;
        this.id = record.id;
        this.init(this.state_update);
        // 将信息 填充到对应控件当中
        // TODO:
      });
    },
    async onChange(value, selectedOptions) {
      const targetOption = selectedOptions[selectedOptions.length - 1];
      targetOption.loading = true;
      if (value.length == 1) {
        const { data: res } = await this.$http.get(
          `front/dept/all?schoolId=${targetOption.value}`
        );
        let departmentList = res.data;
        targetOption.loading = false;
        targetOption.children = [];
        departmentList.forEach((item) => {
          let departmentobj = {};
          departmentobj.label = item.name;
          departmentobj.value = item.id;
          departmentobj.isLeaf = false;
          targetOption.children.push(departmentobj);
        });
        // isleaf 判断是否是最后一页
      }

      if (value.length == 2) {
        targetOption.loading = true;
        const { data: res2 } = await this.$http.get(
          `/front/class/all?deptId=${value[value.length - 1]}`
        );
        targetOption.loading = false;
        let classList = res2.data;

        let tmpchild = [];
        classList.forEach((item) => {
          let classobj = {};
          classobj.label = item.name;
          classobj.value = item.id;
          tmpchild.push(classobj);
        });
        targetOption.children = tmpchild;
        // 将class_id
      }
      this.options = [...this.options];
      this.class_id = value[value.length - 1];
    },
    async loadData(selectedOptions) {},
    async getOptions() {
      //  获取学校信息
      const { data: res } = await this.$http.get("/front/school/all");
      let schoolList = res.data;
      let options = [];
      let option = {};
      schoolList.forEach((item) => {
        option = {};
        option.value = item.id;
        option.label = item.name;
        option.isLeaf = false;
        options.push(option);
      });
      return options;
    },
  },
};
</script>
<style  lang='less' scoped>
.name_part {
  display: flex;
  .name_label {
    width: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 5px;
    margin-right: 28px;
  }
}
.desc_part {
  display: flex;
  margin-top: 20px;

  .desc_label {
    width: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 5px;
    margin-right: 30px;
  }
}
.permission_part {
  display: flex;
  margin-top: 20px;
  .permission_label {
    width: 50px;

    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 5px;
    margin-right: 25px;
  }
}
// /deep/ .ant-input-affix-wrapper .ant-input {
//   width: 283px;
// }
/deep/ .ant-modal-body {
  text-align: center;
}
.name_label {
  margin-left: 50px;
}
/deep/.ant-cascader-menu {
  height: 0px !important;
}
/deep/ .ant-form-item-control {
  width: 350px;
}
</style>